<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>邻里 - 忘记密码</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

body {
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}

.container {
width: 100%;
max-width: 450px;
background: white;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
overflow: hidden;
}

.app-header {
background: #4e73df;
color: white;
padding: 20px;
text-align: center;
position: relative;
}

.back-btn {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
color: white;
font-size: 18px;
cursor: pointer;
}

.app-logo {
width: 70px;
height: 70px;
margin: 0 auto 10px;
background: white;
border-radius: 18px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.app-logo img {
width: 50px;
height: 50px;
}

.app-title {
font-size: 22px;
font-weight: bold;
}

.form-container {
padding: 25px;
}

.step-indicator {
display: flex;
justify-content: space-between;
margin-bottom: 25px;
position: relative;
}

.step {
width: 36px;
height: 36px;
border-radius: 50%;
background: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #999;
z-index: 2;
position: relative;
}

.step.active {
background: #4e73df;
color: white;
box-shadow: 0 0 0 4px rgba(78, 115, 223, 0.2);
}

.step.completed {
background: #1cc88a;
color: white;
}

.step-line {
position: absolute;
top: 18px;
left: 18px;
right: 18px;
height: 2px;
background: #f0f0f0;
z-index: 1;
}

.step-line-progress {
height: 100%;
background: #4e73df;
width: 0%;
transition: width 0.5s;
}

.step-label {
position: absolute;
top: 45px;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
color: #999;
white-space: nowrap;
}

.step.active .step-label {
color: #4e73df;
font-weight: 500;
}

.form-section {
display: none;
}

.form-section.active {
display: block;
animation: fadeIn 0.5s;
}

.form-title {
font-size: 18px;
color: #333;
margin-bottom: 20px;
text-align: center;
font-weight: 600;
}

.form-group {
margin-bottom: 20px;
}

.form-label {
display: block;
margin-bottom: 8px;
font-size: 14px;
color: #555;
font-weight: 500;
}

.form-input {
width: 100%;
padding: 14px 15px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 15px;
transition: all 0.3s;
}

.form-input:focus {
border-color: #4e73df;
box-shadow: 0 0 0 3px rgba(78, 115, 223, 0.1);
outline: none;
}

.input-with-icon {
position: relative;
}

.input-icon {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
color: #999;
cursor: pointer;
}

.btn {
width: 100%;
padding: 14px;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s;
}

.btn-primary {
background: #4e73df;
color: white;
}

.btn-primary:hover {
background: #3a56c4;
}

.btn-secondary {
background: #f8f9fc;
color: #4e73df;
border: 1px solid #ddd;
margin-top: 10px;
}

.btn-secondary:hover {
background: #eaecf4;
}

.countdown {
color: #4e73df;
font-weight: 500;
}

.security-questions {
margin-top: 15px;
border: 1px solid #eee;
border-radius: 8px;
padding: 15px;
background: #f9fafc;
}

.security-title {
font-size: 14px;
margin-bottom: 10px;
color: #555;
font-weight: 500;
}

.password-rules {
font-size: 13px;
color: #777;
margin-top: 5px;
}

.error-message {
color: #e74a3b;
font-size: 13px;
margin-top: 5px;
display: none;
}

.success-message {
color: #1cc88a;
font-size: 14px;
text-align: center;
margin-top: 15px;
display: none;
}

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

.password-strength {
height: 5px;
background: #eee;
border-radius: 3px;
margin-top: 8px;
overflow: hidden;
}

.password-strength-bar {
height: 100%;
width: 0%;
transition: width 0.3s;
}

.strength-weak {
background: #e74a3b;
}

.strength-medium {
background: #f6c23e;
}

.strength-strong {
background: #1cc88a;
}
</style>
</head>
<body>
<div class="container">
<div class="app-header">
<div class="back-btn" id="back-btn">
<i class="fas fa-arrow-left"></i>
</div>
<div class="app-logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#4e73df" width="50px" height="50px">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
</svg>
</div>
<div class="app-title">找回密码</div>
</div>

<div class="form-container">
<div class="step-indicator">
<div class="step active" id="step-1">
1
<div class="step-label">验证身份</div>
</div>
<div class="step" id="step-2">
2
<div class="step-label">安全问题</div>
</div>
<div class="step" id="step-3">
3
<div class="step-label">重置密码</div>
</div>
<div class="step-line">
<div class="step-line-progress" id="step-progress"></div>
</div>
</div>

<!-- 第一步：验证身份 -->
<div class="form-section active" id="step1-form">
<div class="form-title">请输入您的手机号</div>

<div class="form-group">
<label class="form-label">手机号</label>
<input type="tel" class="form-input" placeholder="请输入注册时使用的手机号" id="forgot-phone" required>
<div class="error-message" id="phone-error"></div>
</div>

<div class="form-group">
<label class="form-label">验证码</label>
<div class="input-with-icon">
<input type="text" class="form-input" placeholder="请输入短信验证码" id="verification-code" required>
<span class="input-icon" id="send-code-btn">发送验证码</span>
</div>
<div class="error-message" id="code-error"></div>
</div>

<button type="button" class="btn btn-primary" id="step1-next">下一步</button>
</div>

<!-- 第二步：安全问题 -->
<div class="form-section" id="step2-form">
<div class="form-title">请回答安全问题</div>

<div class="security-questions">
<div class="security-title">请回答以下安全问题以验证您的身份</div>

<div class="form-group">
<label class="form-label">问题一：您出生于哪个城市？</label>
<input type="text" class="form-input" placeholder="请输入答案" id="security-answer1" required>
<div class="error-message" id="answer1-error"></div>
</div>

<div class="form-group">
<label class="form-label">问题二：您第一所学校的名称是什么？</label>
<input type="text" class="form-input" placeholder="请输入答案" id="security-answer2" required>
<div class="error-message" id="answer2-error"></div>
</div>
</div>

<button type="button" class="btn btn-primary" id="step2-next">下一步</button>
<button type="button" class="btn btn-secondary" id="step2-back">上一步</button>
</div>

<!-- 第三步：重置密码 -->
<div class="form-section" id="step3-form">
<div class="form-title">请设置新密码</div>

<div class="form-group">
<label class="form-label">新密码</label>
<div class="input-with-icon">
<input type="password" class="form-input" placeholder="请设置新密码" id="new-password" required>
<span class="input-icon" id="toggle-password">
<i class="fas fa-eye"></i>
</span>
</div>
<div class="password-rules">密码需包含字母和数字，长度至少8位</div>
<div class="password-strength">
<div class="password-strength-bar" id="password-strength-bar"></div>
</div>
</div>

<div class="form-group">
<label class="form-label">确认新密码</label>
<div class="input-with-icon">
<input type="password" class="form-input" placeholder="请再次输入新密码" id="confirm-password" required>
<span class="input-icon" id="toggle-confirm-password">
<i class="fas fa-eye"></i>
</span>
</div>
<div class="error-message" id="password-error"></div>
</div>

<button type="button" class="btn btn-primary" id="reset-password-btn">重置密码</button>
<button type="button" class="btn btn-secondary" id="step3-back">上一步</button>

<div class="success-message" id="reset-success"></div>
</div>
</div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
// 当前步骤
let currentStep = 1;
const totalSteps = 3;

// 更新步骤指示器
function updateStepIndicator() {
// 更新进度条
const progressPercentage = ((currentStep - 1) / (totalSteps - 1)) * 100;
document.getElementById('step-progress').style.width = `${progressPercentage}%`;

// 更新步骤状态
for (let i = 1; i <= totalSteps; i++) {
const stepElement = document.getElementById(`step-${i}`);
if (i < currentStep) {
stepElement.classList.remove('active');
stepElement.classList.add('completed');
} else if (i === currentStep) {
stepElement.classList.add('active');
stepElement.classList.remove('completed');
} else {
stepElement.classList.remove('active', 'completed');
}
}

// 显示当前步骤的表单
document.querySelectorAll('.form-section').forEach((section, index) => {
if (index + 1 === currentStep) {
section.classList.add('active');
} else {
section.classList.remove('active');
}
});
}

// 下一步按钮事件
document.getElementById('step1-next').addEventListener('click', function() {
const phone = document.getElementById('forgot-phone').value;
const code = document.getElementById('verification-code').value;

if (!phone || !/^1[3-9]\d{9}$/.test(phone)) {
showError('phone-error', '请输入正确的手机号码');
return;
}

if (!code || code !== '123456') {
showError('code-error', '验证码错误，请输入123456');
return;
}

// 验证通过，进入下一步
currentStep = 2;
updateStepIndicator();
});

document.getElementById('step2-next').addEventListener('click', function() {
const answer1 = document.getElementById('security-answer1').value;
const answer2 = document.getElementById('security-answer2').value;

if (!answer1) {
showError('answer1-error', '请输入问题一的答案');
return;
}

if (!answer2) {
showError('answer2-error', '请输入问题二的答案');
return;
}

// 模拟验证安全问题
if (answer1 !== '北京' || answer2 !== '第一实验小学') {
showError('answer1-error', '安全问题答案不正确');
return;
}

// 验证通过，进入下一步
currentStep = 3;
updateStepIndicator();
});

// 上一步按钮事件
document.getElementById('step2-back').addEventListener('click', function() {
currentStep = 1;
updateStepIndicator();
});

document.getElementById('step3-back').addEventListener('click', function() {
currentStep = 2;
updateStepIndicator();
});

// 返回按钮事件
document.getElementById('back-btn').addEventListener('click', function() {
if (currentStep > 1) {
currentStep--;
updateStepIndicator();
} else {
alert('返回登录页面');
// 实际应用中这里应该是跳转到登录页面
}
});

// 发送验证码
let countdown = 60;
let countdownInterval;

document.getElementById('send-code-btn').addEventListener('click', function() {
const phone = document.getElementById('forgot-phone').value;

if (!phone || !/^1[3-9]\d{9}$/.test(phone)) {
showError('phone-error', '请输入正确的手机号码');
return;
}

// 禁用按钮并开始倒计时
this.style.pointerEvents = 'none';
this.classList.add('countdown');

// 模拟发送验证码
countdown = 60;
this.textContent = `重新发送(${countdown})`;

countdownInterval = setInterval(() => {
countdown--;
this.textContent = `重新发送(${countdown})`;

if (countdown <= 0) {
clearInterval(countdownInterval);
this.textContent = '发送验证码';
this.style.pointerEvents = 'auto';
this.classList.remove('countdown');
}
}, 1000);

// 显示模拟的验证码
alert('验证码已发送：123456（模拟）');
});

// 显示/隐藏密码
document.getElementById('toggle-password').addEventListener('click', function() {
const passwordInput = document.getElementById('new-password');
const icon = this.querySelector('i');

if (passwordInput.type === 'password') {
passwordInput.type = 'text';
icon.classList.remove('fa-eye');
icon.classList.add('fa-eye-slash');
} else {
passwordInput.type = 'password';
icon.classList.remove('fa-eye-slash');
icon.classList.add('fa-eye');
}
});

document.getElementById('toggle-confirm-password').addEventListener('click', function() {
const passwordInput = document.getElementById('confirm-password');
const icon = this.querySelector('i');

if (passwordInput.type === 'password') {
passwordInput.type = 'text';
icon.classList.remove('fa-eye');
icon.classList.add('fa-eye-slash');
} else {
passwordInput.type = 'password';
icon.classList.remove('fa-eye-slash');
icon.classList.add('fa-eye');
}
});

// 密码强度检测
document.getElementById('new-password').addEventListener('input', function() {
const password = this.value;
const strengthBar = document.getElementById('password-strength-bar');

// 简单的密码强度检测
let strength = 0;
if (password.length >= 8) strength += 1;
if (/[A-Z]/.test(password)) strength += 1;
if (/[0-9]/.test(password)) strength += 1;
if (/[^A-Za-z0-9]/.test(password)) strength += 1;

// 更新强度条
const width = strength * 25;
strengthBar.style.width = `${width}%`;

// 更新颜色
if (strength <= 1) {
strengthBar.className = 'password-strength-bar strength-weak';
} else if (strength <= 3) {
strengthBar.className = 'password-strength-bar strength-medium';
} else {
strengthBar.className = 'password-strength-bar strength-strong';
}
});

// 重置密码
document.getElementById('reset-password-btn').addEventListener('click', function() {
const password = document.getElementById('new-password').value;
const confirmPassword = document.getElementById('confirm-password').value;

if (!password || password.length < 8) {
showError('password-error', '密码长度不能少于8位');
return;
}

if (!/(?=.*[A-Za-z])(?=.*\d)/.test(password)) {
showError('password-error', '密码需包含字母和数字');
return;
}

if (password !== confirmPassword) {
showError('password-error', '两次输入的密码不一致');
return;
}

// 模拟重置密码请求
this.textContent = '处理中...';

setTimeout(() => {
this.textContent = '重置密码';
document.getElementById('reset-success').textContent = '密码重置成功！即将跳转到登录页面...';
document.getElementById('reset-success').style.display = 'block';

// 模拟跳转到登录页面
setTimeout(() => {
alert('密码已重置，请使用新密码登录');
// 实际应用中这里应该是跳转到登录页面
}, 2000);
}, 1500);
});

// 显示错误信息
function showError(elementId, message) {
const errorElement = document.getElementById(elementId);
errorElement.textContent = message;
errorElement.style.display = 'block';

// 5秒后隐藏错误信息
setTimeout(() => {
errorElement.style.display = 'none';
}, 5000);
}

// 初始化步骤指示器
updateStepIndicator();
});
</script>
</body>
</html>